import React from 'react';
import {
  Form,
  Modal,
  Card,
  DatePicker,
  Input,
  InputNumber,
  Upload,
  Button,
  Icon,
  Table,
  Row,
  Col
} from 'antd';
import { LwjUpload } from 'components';
import { validateMobile } from 'utils/utils';
import { LwjDownload } from 'components';

const FormItem = Form.Item
const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
}
const publishCustomizeOrderModal = ({
  dispatch,
  toChangeOrder,
  onOk,
  isUpdate,
  currentContractDetail,
  isLoading,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll
  },
  ...updateModalProps
}) => {

  const handleSubmit = (handleType) => {
    if (handleType === "ORDER_CHANGE") {
      toChangeOrder();
      return;
    }
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (handleType === "CONFIRM_SUBMIT") {
          values.contractSignedAt = values.contractSignedAt.valueOf();
          values.contractInstalledAt = values.contractInstalledAt.valueOf();
          values.productType = currentContractDetail.productType;
          values.version = currentContractDetail.version;
          onOk(values);
        }
      }
    });
  };

  const xlsProps = {
    maxfile: 1,
    target: '/services/upload/order',
    uploadIcon: 'upload',
    fileType: '',
    onChange(value) {
      console.log(value);
    },
    showUploadList: true
  }

  return (
    <Modal {...updateModalProps}>
      {currentContractDetail.status === "PENDING_PUBLISH" &&
        <Card bordered={false}>
          <Form onSubmit={handleSubmit} hideRequiredMark>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="合同号">
                  {getFieldDecorator('contractNum', {
                    rules: [
                      {
                        required: true,
                        message: '请输入合同号',
                        whitespace: true
                      },
                    ],
                    initialValue: currentContractDetail.contractNum
                  })(<Input disabled placeholder="请输入合同号" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="合同签订时间">
                  {getFieldDecorator('contractSignedAt', {
                    rules: [
                      {
                        required: true,
                        message: '请选择合同下单时间',
                        type: 'object',
                      },
                    ],
                    initialValue: currentContractDetail.orderContractAt
                  })(
                    <DatePicker style={{ width: '100%' }} />
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label="合同安装时间">
                  {getFieldDecorator('contractInstalledAt', {
                    rules: [
                      {
                        required: true,
                        message: '请选择合同安装时间',
                        type: 'object',
                      },
                    ],
                    initialValue: currentContractDetail.installContractAt
                  })(
                    <DatePicker style={{ width: '100%' }} />
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label="合同金额">
                  {getFieldDecorator('contractAmount', {
                    rules: [
                      {
                        required: true,
                        message: '请输入合同金额'
                      },
                    ],
                    initialValue: currentContractDetail.orderQuoteSummary.orderAmount
                  })(<InputNumber disabled style={{ width: "100%" }} placeholder="请输入合同金额" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="收货人姓名">
                  {getFieldDecorator('receiptUserName', {
                    rules: [
                      {
                        required: true,
                        message: '请输入收货人姓名',
                        whitespace: true,
                      },
                    ],
                    initialValue: currentContractDetail.receiptUserName
                  })(<Input disabled placeholder="请输入收货人姓名" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="收货人手机号">
                  {getFieldDecorator('receiptUserPhoneNum', {
                    rules: [
                      {
                        required: true,
                        message: '请输入收货人手机号',
                        whitespace: true,
                      }, {
                        validator: validateMobile
                      }
                    ],
                    initialValue: currentContractDetail.receiptUserPhoneNum
                  })(<Input disabled placeholder="请输入收货人手机号" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="收货地址">
                  {getFieldDecorator('receiptAddress', {
                    rules: [
                      {
                        required: true,
                        message: '请输入收货地址',
                        whitespace: true
                      },
                    ],
                    initialValue: currentContractDetail.receiptAddress
                  })(<Input disabled placeholder="请输入收货地址" />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="设计方案">
                  {getFieldDecorator('cadAttachment', {
                    rules: [
                      {
                        required: true,
                        message: '请上传设计方案',
                      }
                    ],
                    initialValue: currentContractDetail.designAttachment
                  })(<LwjDownload title={'点击下载'} targetUrl={currentContractDetail.designAttachment} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="报价单">
                  {getFieldDecorator('finalAccountsAttachment', {
                    rules: [
                      {
                        required: true,
                        message: '请上传报价单',
                      }
                    ],
                    initialValue: currentContractDetail.orderQuoteSummary.quoteAttachment
                  })(<LwjDownload title={'点击下载'} targetUrl={currentContractDetail.orderQuoteSummary.quoteAttachment} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="备注">
                  {getFieldDecorator('memo', {
                    initialValue: currentContractDetail.memo
                  })(<Input placeholder="请输入备注" />)}
                </FormItem>
              </Col>
            </Row>
            <FormItem
              style={{ marginTop: 20 }}
              wrapperCol={{ span: 6, offset: 19 }}>
              <Button onClick={() => handleSubmit("ORDER_CHANGE")} style={{ marginRight: 10 }}>
                合同变更
              </Button>
              <Button type="primary" onClick={() => handleSubmit("CONFIRM_SUBMIT")} style={{ marginRight: 10 }} loading={isLoading}>
                确认下单
              </Button>
            </FormItem>
          </Form>
        </Card>}
    </Modal>
  )
}

export default Form.create()(publishCustomizeOrderModal);
